<template>
  <div id="stencil-container"></div>
</template>
<script setup>
import { Stencil } from "@antv/x6-plugin-stencil";
import HomeSvg from "@/assets/icons/home.svg";

const stencilRef = ref(null);
/**
 * 渲染拓扑图的stencil
 * @param topo_graph 拓扑图的画布
 * @param mountEle 挂载的元素
 * @param groups 组
 */
const renderStencil = (
  topo_graph,
  mountEle,
  groups = [
    {
      title: "基础资源",
      name: "group1",
      graphHeight: 200,
      graphWidth: 300,
    },
    {
      title: "场景设备",
      name: "group2",
      graphHeight: 200,
      graphWidth: 300,
    },
  ],
  layoutOptions = {
    columns: 4,
    columnWidth: "auto",
    rowHeight: "auto",
  }
) => {
  const stencil = new Stencil({
    title: "拓扑资源",
    target: topo_graph,
    stencilGraphWidth: "100%",
    stencilGraphHeight: "100%",
    collapsable: true,
    groups,
    layoutOptions,
  });
  mountEle.appendChild(stencil.container);
  return stencil;
};
/**
 * 渲染stencil
 * @param stencil stencil实例
 * @param imageNodes 图片节点
 * @param groupName 组名
 */
const stencilLoad = (stencil, imageNodes, groupName) => {
  stencil.load(imageNodes, groupName);
};

const renderStencilNode = (graph) => {
  console.log(graph);

  // 图片节点
  const imageNodes = [];
  imageNodes.push(
    graph.createNode({
      shape: "org-node",
      width: 80,
      height: 60,
      attrs: {
        image: {
          // 'xlink:href': 'https://172.17.2.123/api/simulation/static/resourceLibrary/default_image/client/PC.svg',
          "xlink:href": HomeSvg,
          fill: "red",
          // 居中
          xAlign: "middle",
          yAlign: "top",
          refX: "50%",
          // refY: '40%',
          // 根据外框g进行缩放
          refWidth2: "90%",
          refHeight2: "90%",
        },
        label: {
          text: "rect",
          fill: "#666",
          fontSize: 16,
          // 居中
          xAlign: "middle",
          yAlign: "middle",
          refX: "50%",
          refY: "90%",
        },
      },
    })
  );
  const baseNodes = [];
  baseNodes.push(
    graph.createNode({
      width: 80,
      height: 60,
      attrs: {
        rect: {
          fill: "transparent",
          strokeWidth: 2,
        },
      },
    })
  );
  baseNodes.push(
    graph.createNode({
      shape: "text-node",
      width: 80,
      height: 60,
      attrs: {
        label: {
          text: "text",
          strokeWidth: 1,
          xAlign: "middle",
          yAlign: "middle",
          refX: "50%",
          refY: "50%",
        },
      },
    })
  );
  baseNodes.push(
    graph.createNode({
      shape: "rect",
      width: 80,
      height: 60,
      attrs: {
        label: {
          text: "text",
          fill: "red",
          strokeWidth: 1,
          xAlign: "middle",
          yAlign: "top",
          refX: "50%",
          refY: "5px",
        },
        rect: {
          fill: "transparent",
          strokeWidth: 2,
        },
      },
    })
  );
  // 渲染stencil
  stencilRef.value = renderStencil(
    graph,
    document.getElementById("stencil-container")
  );
  // 加载stencil
  stencilLoad(stencilRef.value, imageNodes, "group2");
  stencilLoad(stencilRef.value, baseNodes, "group1");
};

defineExpose({
  renderStencilNode,
});
</script>
<style lang="scss" scoped>
#stencil-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 100%;
  z-index: 100;

  ::v-deep(.el-tabs) {
    margin: 0 !important;
  }
}
</style>

<style lang="scss">
// .x6-widget-stencil {
//   background: var(--bg-color);
// }
// .x6-widget-stencil-title,
// .x6-widget-stencil-group > .x6-widget-stencil-group-title {
//   background-color: var(--sidebar-item-active);
//   color: var(--el-text-color-primary);
// }

// .x6-widget-stencil-title:hover,
// .x6-widget-stencil-group > .x6-widget-stencil-group-title:hover {
//   color: var(--primary-color);
// }
</style>
